<template>
    <div class="container">

         <navbar class="navbarb">  
            <navbar-item type="title">
                <text class="headtext">运动</text>
            </navbar-item>
            <navbar-item type="right">
                <icon class="setIcon" @click="openBottomPopup"  :eeui="{content:'ios-settings',fontSize:50}"></icon>
            </navbar-item>
        </navbar>


        <wxc-popup popup-color="#ffffff"
                :show="isBottomShow"
                @wxcPopupOverlayClicked="popupOverlayBottomClick"
                pos="right"
                width="300">
            <div class="demo-content">
                <wxc-cell label="课程设置"
                :has-arrow="true"
                @wxcCellClicked="classSetPage"
                :has-margin="true"></wxc-cell>
                <wxc-cell label="运动记录"
                :has-arrow="true"
                @wxcCellClicked="sportreport"
                :has-margin="true"></wxc-cell>
                <wxc-cell label="历史排名"
                :has-arrow="true"
                @wxcCellClicked="rankingTo"
                :has-margin="true"></wxc-cell>
                <wxc-cell label="帮助"
                :has-arrow="true"
                @wxcCellClicked="helppageTo"
                :has-margin="true"></wxc-cell>
            </div>
        </wxc-popup>

        <!-- <div class="topdownBox">
            <div class="topdowmitem">
                <image src="../../assets/images/icon2.png" style="width:26px;height:28px"></image>
                <text class="topdownText">跑步</text>
            </div>
        </div> -->
       <tabbar
                ref="reflectName"
                class="tabbar"
                :eeui="{ tabType: 'top' }"
                @pageSelected="pageSelected"
                tabBackgroundColor="#fff"
                textSelectColor="#08ce7f"
                textUnselectColor="#5A5A5A"
                textSize="32"
                indicatorColor="#1CB66E"
                indicatorHeight="2"
                indicatorWidth="158"
                @tabReselect="tabReselect">

                <tabbar-page ref="name_1" @refreshListener="refreshListener"
                         :eeui="{ tabName: 'name_1', title:'体育成绩跑' }">
                    
                    <div class="page-content">
                        <image src="../../assets/images/mapbg.jpg" :style="{width:750,height:innerpageHeight}"></image>
                        <text class="rightTip">本学期任务：40公里</text>
                        
                        <image class="runriceBox" :style="{top:(Top1000 -22)}" src="../../assets/images/runricebg.png" style="width:467px;height:467px"></image>
                        <div class="runrice" :style="{top:Top1000}">
                            <text class="runricetit">计入成绩公里数</text>
                            <text class="runriceNum" @click="sportreport">0</text>
                        </div>
                        <text class="runriceBtn" @click="runstart">开始跑步</text>
                    </div>
                </tabbar-page>
                <tabbar-page ref="name_1" @refreshListener="refreshListener"
                         :eeui="{ tabName: 'name_2', title:'自由跑' }">
                    
                    <div class="page-content">
                        
                            <image src="../../assets/images/mapbg.jpg" :style="{width:750,height:innerpageHeight}"></image>
                       
                        
                        <image class="runriceBox" :style="{top:(Top1000 -22)}" src="../../assets/images/runricebg.png" style="width:467px;height:467px"></image>
                        <div class="runrice" :style="{top:Top1000}">
                            <text class="runricetit">公里数</text>
                            <text class="runriceNum" @click="sportreport">0</text>
                        </div>
                        <text class="runriceBtn" @click="runstart">开始跑步</text>
    
                    </div>
                </tabbar-page>
                <tabbar-page ref="name_1" @refreshListener="refreshListener"
                         :eeui="{ tabName: 'name_3', title:'得分规则' }">
                    
                    <div class="page-content">
                        <text class="content-text">得分规则</text>
                    </div>
                </tabbar-page>
        </tabbar>


       

       
    </div>
</template>
<script>
    const eeui = app.requireModule('eeui');
    import { WxcPopup,WxcCell } from 'weex-ui';
     export default {
         components: { WxcPopup,WxcCell },
         data(){
             
             return{
                 innerpageHeight:'',
                 Top1000:254,
                tabPages: [
                    {
                        tabName: 'sprotrun',
                        title: '体育成绩跑',
                        url: '',
                    },
                    {
                        tabName: 'friend',
                        title: '自由跑',
                        url: '',
                    },
                    
                ],
                isBottomShow: false,
                height: 400
             }
         },
         methods:{
             openBottomPopup () {
                this.isBottomShow = true;
            },
             pageSelected(data) {
                this.position = data.position;
            },
             popupOverlayBottomClick () {
                this.isBottomShow = false;
            },
            wxcCellClicked (e) {
                console.log(e)
            },
            
            sportreport(){
               eeui.openPage({
                    url: 'sprotreport.js',
                    statusBarColor:'#1eb76e',
                    pageName:'运动记录',
                    animated:true,
                }, function(result) {
                    //......
                });  
            },
            classSetPage(){
               eeui.openPage({
                    url: 'classSetPage.js',
                    statusBarColor:'#1eb76e',
                    pageName:'课程设置',
                    animated:true,
                }, function(result) {
                    //......
                });  
            },
            helppageTo(){
               eeui.openPage({
                    url: 'helppage.js',
                    statusBarColor:'#1eb76e',
                    pageName:'帮助',
                    animated:true,
                }, function(result) {
                    //......
                });  
            },
            rankingTo(){
               eeui.openPage({
                    url: 'rankingpage.js',
                    statusBarColor:'#1eb76e',
                    pageName:'排名',
                    animated:true,
                }, function(result) {
                    //......
                });  
            },
            runstart(){
                eeui.confirm({
                    title: "温馨提示",
                    message: "你确定开始吗？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        //确认
                        eeui.openPage({
                            url: 'readypage.js',
                            statusBarColor:'#1eb76e',
                            pageName:'准备',
                            animated:false,
                        }, function(result) {
                            //......
                        }); 
                    }
                });
                
            }
         },
         created(){
             let deviceHeight = weex.config.env.deviceHeight / weex.config.env.deviceWidth * 750;
             this.innerpageHeight = deviceHeight-300;
             if((deviceHeight-300) < 1000){
                 this.Top1000 = 150;
             }
         }
     }
</script>
<style scoped>
.container{
    background-color:#ebebeb;
}
.map{
    background: #fff;
}
 .navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
     .headtext {
        font-size: 36px;
        color: #ffffff;
    }

    .tabbar {
        width: 750px;
        flex: 1;
    }

    .page-content {
        width: 750px;
        align-items: center;
    }
    .rightTip{
        font-size:26;
        width:288;
        height:57;
        position:absolute;
        top:51;
        left:0;
        text-align:center;
        background-color:#fff;
        line-height: 57;
        border-top-right-radius: 50;
        border-bottom-right-radius: 50;
        
    }
    .setIcon{
        width:47;
        height:47;
       margin-right:30;
       color:#fff;
    }
    .runriceBox{
        position: absolute;
        top: 232;
        left: 142;
    }
    .runrice{
        width: 420;
        height: 420;
        border-radius: 1000;
        background-color: #08ce7f;
        position: absolute;
        top: 254;
        left: 164;
        align-items: center;
        padding-top: 100;
    }
    .runricetit{
        font-size: 32;
        color: #fff;

    }
    .runriceNum{
        font-size: 85;
        color: #fff;
        font-weight: bold;
        margin-top: 40;
    }
    .runriceBtn{
        width: 358;
        height: 94;
        text-align: center;
        line-height: 94px;
        background-color: #1CB66E;
        border-radius: 47;
        font-size: 32;
        color: #fff;
        position:absolute;
        bottom: 105;
        left: 196;
    }
.toprightbox{
    width: 137px;
    height: 44px;
    flex-direction: row;
    border-style: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 50;
    align-items: center;
    justify-content: center;
    margin-right: 31;
}
.topnavtext{
    font-size: 29;
    color: #fff;
    margin-left: 5;
    margin-right: 5;
}
.topdownBox{
    position: absolute;
    top: 82;
    right: 0;
}
.topdowmitem{
    flex-direction: row;
}
</style>
